<template>
	<view style="width: 100%;">
		<view v-if="list.length > 0"
			style="width: 90rpx;height: 90rpx;background: #e8e8e8;border-radius: 10rpx;display: flex;justify-content: space-around;flex-wrap: wrap;padding: 2rpx;align-items: center;+">
			<image @error="err" v-for="(item,k) in list"
				:src="$store.state.common.systemInfo.fileurl + 'avatar/' + item.uid + '.jpg'"
				style="width: 38rpx;height: 38rpx;border-radius: 8rpx;" mode=""></image>
		</view>
		<view class="" v-else style="width: 90rpx;height: 90rpx;background: #e8e8e8;border-radius: 10rpx;display: flex;justify-content: space-around;flex-wrap: wrap;padding: 2rpx;align-items: center;+">
			<image @error="err" v-for="(item,k) in listc"
				:src="$store.state.common.systemInfo.fileurl + 'avatar/' + item.uid + '.jpg'"
				style="width: 38rpx;height: 38rpx;border-radius: 8rpx;" mode=""></image>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		name: "bgyx-group-avatar",
		data() {
			return {
				listc: []
			}
		},
		props: {
			id: {
				type: Number | String,
				default: ""
			}
		},
		mounted() {
			this.getdata(this.id)
			setTimeout(() => {
				if (this.list.length == 0) {
					this.getavatardata()
				}
			}, 1500)
		},
		computed: {
			...mapState({
				list: function(state) {
					const groupfind = state.friend.groups[this.id]
					if (groupfind) {
						return groupfind.filter((_, k) => k <= 3)
					}
					return []
				}
			})
		},
		methods: {
			getdata: function(id) {
				// console.log(888888, this.id, this.list)
			},
			getavatardata: async function() {
				const ret = await this.$u.post(`bgyx/bgyx/getdata/groupuser`, {
					gid: this.id
				})
				if (ret && ret.success) {
					this.listc = ret.data.filter((_, k) => k <= 3)
				}
			},
			err: function(e) {
				console.log(e)
				setTimeout(() => {
					this.$forceUpdate()
				}, 1000)
			}
		}
	}
</script>

<style>
</style>